<style lang="less">
  @import '../styles/common.less';
  @import '../tables/components/table.less';
</style>
<style>

</style>
<template>
  <div class="clock_today">
    <Row class="row">
      <Col span="10" class="padding-left-10 list-div">
      <Card>
        <div class="DatePicker-div">
          <DatePicker
              :open="true"
              v-model="DatePickerValue"
              type="date"
              @on-change="handleChange">
            <a href="javascript:void(0)" @click="">
              <template v-if="DatePickerValue === ''"></template>
            </a>
          </DatePicker>
        </div>
      </Card>
      </Col>
      <Col span="14" class="padding-left-10 list-div">
      <Card>
        <div class="Timeline">
          <Timeline v-if="data.length > 0">
            <TimelineItem v-for="(el,index) in data" :key="index"
                          color="green">
              <Icon type="ios-radio-button-on" slot="dot"></Icon>
              <p class="time" v-text="el.create_time"></p>
              <p class="content">
                <span v-if="el.from == 'home'">本部</span>
                <span v-if="el.from == 'out'">外勤</span>
                &nbsp;
                <span v-if="el.type == 'work'">到岗</span>
                <span v-if="el.type == 'leave'">离岗</span>
              </p>
              <p class="content" v-text="el.address"></p>
              <p class="content" v-text="el.description"></p>
            </TimelineItem>
          </Timeline>
        </div>
      </Card>
      </Col>
    </Row>

  </div>
</template>

<script>
  import Cookies from 'js-cookie';
  import Util from '../../libs/util';
  import Utils from '../../libs/mod.utils';
  import String from '../../libs/mod.string';
  import Modal from '../../libs/mod.Modal';
  let today = new Date();
  export default {
    components: {},
    data () {
      return {
        total: 0,
        page: 1,
        size: 10,
        id: '',
        searchConName: '',
        searchConTel: '',
        showCurrentTableData: false,
        loading: true,
        showCurrentColumns: [],
        editInlineAndCellData: [],
        columns: [
          {
            type: 'selection',
            width: 60,
            align: 'center'
          },
          {
            key: 'name',
            title: '姓名',
          },
          {
            key: 'department',
            title: '部门',
          },
          {
            key: 'late',
            title: '迟到（次）',
          },
          {
            key: 'early',
            title: '早退（次）',
          },
          {
            key: 'ask',
            title: '请假（次）',
          }
        ],
        data: [],
        dataDetail: {},
        initTable: [],
        DatePickerVal: '',
        Datetime: '',
        Monthtime: '',
        demoEvents: [],
        DatePickerValue: '',
      };
    },
    created: function () {
      var _this = this;
      var Datetime = Utils.dateToDate(new Date());
      var Monthtime = Utils.dateToMonth(new Date());
      _this.Datetime = Datetime;
      _this.Monthtime = Monthtime;
      //_this.getEventsData();
      _this.getData();

    },
    mounted () {
      var _this = this;
      _this.$nextTick(function () {
        $('.DatePicker-div').click();
      });
    },
    methods: {
      handleDayChanged (data) {
        var _this = this;
        if (data.date) {
          var Datetime = Utils.dateToDate(data.date);
          _this.Datetime = Datetime;
          _this.getData();
        }
      },
      handleMonthChanged (data) {
        var _this = this;
        var Monthtime = data.replace(/年/g, '-').trim();
        Monthtime = Monthtime.replace(/月/g, '').trim();
        if (Monthtime) {
          _this.Monthtime = Monthtime;
          _this.getEventsData();
        }
      },
      handleClick () {
        var _this = this;
        console.log('handleClick');
      },
      handleChange (date) {
        var _this = this;
        _this.DatePickerValue = date;
        _this.Datetime = date;
        _this.getData();
      },
      handleClear () {
        var _this = this;
        console.log('handleClear');
      },
      handleOk () {
        var _this = this;
        console.log('handleOk');
      },
      getData () {
        var _this = this;
        var data = {
          uid: Util.toJson(localStorage.getItem('userInfo')).id,
          date: _this.Datetime,
        };
        var params = {
          url: '/clock/list',
          //domain: 'http://sd.jnaw.top/sd2-mock',
          type: Util.method.get,
          data: data,
          success: _successFun
        };
        Util.ajax(_this, params);
        function _successFun(res) {
          if (res.result == 0) {
            var _data = res.data || [];
            _this.data = _data || [];
          } else {
            _this.$Message.error('查询信息失败!');
          }
        }
      },
      getEventsData () {
        var _this = this;
        var data = {
          uid: Util.toJson(localStorage.getItem('userInfo')).id,
          from: _this.Monthtime + '-01',
          to: _this.Monthtime + '-31',
        };
        var params = {
          url: '/clock/stat',
          //domain: 'http://sd.jnaw.top/sd2-mock',
          type: Util.method.get,
          data: data,
          success: _successFun
        };
        Util.ajax(_this, params);
        function _successFun(res) {
          if (res.result == 0) {
            var data = res.data;
            var demoEvents = _this.demoEvents;
            for (var k in data) {
              if (!data[k]) {
                continue;
              }
              var create_time = data[k].create_time;
              var clocks = data[k].clocks;
              create_time = Utils.dateToDate2(create_time);
              var obj = {
                date: create_time,
                title: k,
              };
              var has = _this.have_obj(demoEvents, obj);
              if (clocks.length > 0 && has != true) {
                demoEvents.push(obj);
              }
            }
            _this.demoEvents = demoEvents;
          } else {
            _this.$Message.error('查询信息失败!');
          }
        }
      },
      have_obj: function (arr, obj) {
        var _this = this;
        var has = false;
        for (var k in arr) {
          if (!arr[k]) {
            continue;
          }
          if (arr[k].date == obj.date) {//已存在
            has = true;
            break;
          }
        }
        return has;
      },
      handleSearch () {
        var _this = this;
        _this.page = 1;
        var searchConName = _this.searchConName;
      },
      changePage (page) {
        var _this = this;
        console.log('page', page);
        _this.page = page;
        _this.getData();
      },
      show: function (index, data) {
        var _this = this;
        var id = data.id;
        _this.id = id;

      },
      asyncOK: function () {
        var _this = this;
        _this.showCurrentTableData = false;
      },
    }
  };
</script>
